import React from "react";
import './index.css';
import {Button} from "antd";
import PriceTag from "../../../../Component/PriceTag";
import Blank from "../../../../Component/Blank";
import Message from "../../../../Common/svg/Message";
import Heart from "../../../../Common/svg/Heart";
import MessageUtil from "../../../../utils/MessageUtil";
import Ticket from "../../../../Component/Ticket";
import QualityDetail from "../../../../utils/Message/QualityMessages";
import QualityServer from "../../../../Server/Trade/QualityServer";
import URL from "../../../../Server/URL";
import TimeUtil from "../../../../utils/TimeUtil";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();
        let id=props.match.params.id;

        this.state={
            text:`a)使用方法`,
            id,
            title:"",
            soldOut:"",
            price:"",
            desc:"",
            subMoney:"",
            startTimeStr:"",
            endTimeStr:"",
        }
        this.Gen();
    }
    Gen(){
        QualityServer.ShopFlySuperiorShopDetails(this.state.id)
        .then(res=>{
            console.log(res)
            let superior=res.data.sFlySuperior;
            let coupon=res.data.coupon;
            let title=superior.title;
            let desc=coupon.instructions;
            let price=superior.price;
            // let pic=URL.GetURL(superior.img);
            let soldOut=superior.sales;

            let subMoney=coupon.subtractMoney;

            let startTime=new Date(coupon.startTime);
            let startTimeStr=TimeUtil.Date2StrShort(startTime);
            let endTime=new Date(coupon.endTime);
            let endTimeStr=TimeUtil.Date2StrShort(endTime);

            this.setState({
                title,
                soldOut,
                price,
                desc,
                subMoney,
                startTimeStr,
                endTimeStr
            })
        })
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    render(){

        let time=this.state.startTimeStr+"-"+this.state.endTimeStr;

        return(
            <div className="HireServiceDetail Courseware_Body">
                <div className="HireServiceDetail_User flexContainer">
                    <h3>{this.state.title}</h3>
                    <Blank/>
                    <span className="HireServiceDetail_User_Collet"><span className="HireServiceDetail_User_Collet_SVG"><Heart/></span>收藏</span>
                    <span className="HireServiceDetail_User_Comment"><span className="HireServiceDetail_User_Collet_SVG"><Message/></span>留言</span>
                </div>
                <div className="HireServiceDetail_User flexContainer">
                    <span>
                        <div>有效期：{time}</div>
                        <div>已售 {this.state.soldOut}</div>
                    </span>
                    <Blank/>
                    <PriceTag currency={"￥"} price={this.state.price} unit={""}/>
                </div>
                
                <p className="GrayBGContainer">
                    {this.state.text}
                </p>
                <Ticket price={this.state.subMoney} name={this.state.title} type="抵用券" desc={this.state.desc}/>
                {/* <div className="HireServiceDetail_Comment">
                    <div><CoursewareSvg fill="#333"/><span className="HireServiceDetail_CommentTitle">买家留言</span></div>
                    <div>
                        <Comment portrait={this.testLogo} 
                        name="ives" time="2020-9-2" text="测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论" />
                        <Comment isReply={true} portrait={this.testLogo} 
                        name="ives" time="2020-9-2" text="测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论测试评论" />
                    </div>
                </div> */}

                <div className="HireServiceDetail_Bottom">
                        <Button style={{width:"12rem"}} type="primary" 
                        shape="round" size="large"
                        onClick={e=>QualityDetail.ConfirmPay(this.state.id,this.state.price)}>
                            立即购买
                        </Button>
                </div>
            </div>
            
        )
    }
}